<template>
  <div class="min-h-screen bg-base-100">
    <!-- 导航栏 -->
    <nav class="navbar bg-base-100 shadow-md sticky top-0 z-50">
      <div class="container mx-auto px-4 flex justify-between items-center">
        <div class="text-2xl font-bold text-primary">学词乐</div>
        <div class="hidden md:flex space-x-6 items-center">
          <button
            class="btn btn-primary btn-md rounded-full px-6 shadow-xl hover:shadow-primary/50 transition-all"
            @click="goStudy"
          >
            立即开始
          </button>
        </div>
        <div class="dropdown dropdown-end md:hidden">
          <label tabindex="0" class="btn btn-ghost btn-circle">
            <Bars3Icon class="h-6 w-6" />
          </label>
          <ul
            tabindex="0"
            class="dropdown-content z-[1] menu p-2 shadow-xl bg-base-100 rounded-box w-52 mt-4"
          >
            <li><a href="#features">功能特色</a></li>
            <li><a href="#vocabulary">词库资源</a></li>
            <li><a href="#about">关于我们</a></li>
            <li>
              <a class="text-primary font-medium" @click="goStudy">立即开始</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- 头部区域 -->
    <section
      class="hero py-16 md:py-28 bg-gradient-to-br from-emerald-500 to-blue-500 text-white relative overflow-hidden"
    >
      <div
        class="absolute inset-0 bg-[url('')]"
        opacity-30
      ></div>
      <div class="container mx-auto px-4 text-left relative z-10">
        <h1
          class="text-4xl md:text-5xl font-bold mb-6 leading-tight drop-shadow-md"
        >
          智能英语词汇学习工具，让学习更轻松有效！
        </h1>
        <p class="text-xl md:text-2xl mb-10 opacity-90">
          覆盖小学、初中、高中、大学、雅思、考研、全阶段英语教材，智能同步学习进度，支持词汇量测试，错题巩固。
        </p>
        <div class="flex flex-col sm:flex-row gap-6 mb-16">
          <button
            class="btn btn-primary btn-lg rounded-full px-8 shadow-xl hover:shadow-primary/50 transition-all text-lg"
            @click="goStudy"
          >
            立即开始
          </button>
          <button
            class="btn glass btn-lg rounded-full px-8 text-white border-white hover:bg-white/20 transition-all text-lg"
            @click="gitee()"
          >
            Stat us on Gitee
          </button>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-3xl">
          <div
            class="stat bg-base-100/20 backdrop-blur-sm rounded-box p-6 shadow-xl transform hover:scale-105 transition-all duration-300"
          >
            <div class="stat-value text-4xl font-bold">50万+</div>
            <div class="stat-title text-base-content/90 font-medium">
              词汇量
            </div>
          </div>
          <div
            class="stat bg-base-100/20 backdrop-blur-sm rounded-box p-6 shadow-xl transform hover:scale-105 transition-all duration-300"
          >
            <div class="stat-value text-4xl font-bold">1000+</div>
            <div class="stat-title text-base-content/90 font-medium">
              教材版本
            </div>
          </div>
          <div
            class="stat bg-base-100/20 backdrop-blur-sm rounded-box p-6 shadow-xl transform hover:scale-105 transition-all duration-300"
          >
            <div class="stat-value text-4xl font-bold">500+</div>
            <div class="stat-title text-base-content/90 font-medium">
              考试题库
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 功能特色 -->
    <section id="features" class="py-16 bg-base-200">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-left mb-12">核心功能</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <div
            class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-base-200"
          >
            <div class="card-body">
              <div class="text-5xl mb-5 bg-primary/10 p-4 rounded-full">📚</div>
              <h3 class="card-title text-xl font-bold">全面教材覆盖</h3>
              <p class="text-base-content/70">
                覆盖各大版本教材，小学、初中、高中、雅思、考试等、全阶段同步学习
              </p>
            </div>
          </div>
          <div
            class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-base-200"
          >
            <div class="card-body">
              <div class="text-5xl mb-5 bg-primary/10 p-4 rounded-full">🎯</div>
              <h3 class="card-title text-xl font-bold">智能学习规划</h3>
              <p class="text-base-content/70">
                根据学习进度和掌握程度，智能规划个性化学习方案
              </p>
            </div>
          </div>
          <div
            class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-base-200"
          >
            <div class="card-body">
              <div class="text-5xl mb-5 bg-primary/10 p-4 rounded-full">📝</div>
              <h3 class="card-title text-xl font-bold">单词、句子学习</h3>
              <p class="text-base-content/70">
                多维度学习单词和句子，提高记忆效率和语境理解能力
              </p>
            </div>
          </div>
          <div
            class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-base-200"
          >
            <div class="card-body">
              <div class="text-5xl mb-5 bg-primary/10 p-4 rounded-full">📊</div>
              <h3 class="card-title text-xl font-bold">学习追踪</h3>
              <p class="text-base-content/70">
                详细的学习数据分析，清晰掌握学习进度
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 词库资源 -->
    <section id="vocabulary" class="py-20 bg-base-100">
      <div class="container mx-auto px-4">
        <h2
          class="text-3xl md:text-4xl font-bold text-left mb-16 relative inline-block w-full"
        >
          <span class="relative z-10">丰富的词库资源</span>
          <span
            class="absolute bottom-0 left-0 w-24 h-2 bg-primary/30 rounded-full"
          ></span>
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div
            class="card bg-base-200 shadow-xl hover:shadow-2xl transition-all duration-300 border border-base-300 overflow-hidden"
          >
            <div class="card-body">
              <h3
                class="card-title mb-6 text-xl font-bold pb-2 border-b border-base-300"
              >
                小学阶段
              </h3>
              <ul class="list-disc pl-5 space-y-3 text-base-content/80">
                <li>人教版英语词汇</li>
                <li>外研版英语词汇</li>
                <li>牛津英语词汇</li>
              </ul>
            </div>
          </div>
          <div
            class="card bg-base-200 shadow-xl hover:shadow-2xl transition-all duration-300 border border-base-300 overflow-hidden"
          >
            <div class="card-body">
              <h3
                class="card-title mb-6 text-xl font-bold pb-2 border-b border-base-300"
              >
                初中阶段
              </h3>
              <ul class="list-disc pl-5 space-y-3 text-base-content/80">
                <li>初中必备词汇</li>
                <li>中考重点词汇</li>
                <li>各地区版本教材集合</li>
              </ul>
            </div>
          </div>
          <div
            class="card bg-base-200 shadow-xl hover:shadow-2xl transition-all duration-300 border border-base-300 overflow-hidden"
          >
            <div class="card-body">
              <h3
                class="card-title mb-6 text-xl font-bold pb-2 border-b border-base-300"
              >
                高中阶段
              </h3>
              <ul class="list-disc pl-5 space-y-3 text-base-content/80">
                <li>高中核心词汇</li>
                <li>高考词汇突破</li>
                <li>高考写作关键词汇</li>
              </ul>
            </div>
          </div>
          <div
            class="card bg-base-200 shadow-xl hover:shadow-2xl transition-all duration-300 border border-base-300 overflow-hidden"
          >
            <div class="card-body">
              <h3
                class="card-title mb-6 text-xl font-bold pb-2 border-b border-base-300"
              >
                雅思、考研
              </h3>
              <ul class="list-disc pl-5 space-y-3 text-base-content/80">
                <li>雅思基础词汇</li>
                <li>考研词组</li>
                <li>专题词汇训练</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 行动召唤 -->
    <section
      id="about"
      class="py-20 bg-gradient-to-br from-indigo-500 to-pink-500 text-white relative overflow-hidden"
    >
      <div
        class="absolute inset-0 bg-[url('')]"
        opacity-30
      ></div>
      <div class="container mx-auto px-4 text-center relative z-10">
        <h2 class="text-3xl md:text-4xl font-bold mb-6 drop-shadow-md">
          开始你的词汇学习之旅
        </h2>
        <p class="text-xl mb-10 opacity-90">加入我们，让学习更有效率</p>
        <button
          class="btn btn-lg rounded-full px-10 bg-white text-primary hover:bg-opacity-90 border-none shadow-xl hover:shadow-white/30 transition-all text-lg font-bold"
          @click="goStudy"
        >
          立即开始
        </button>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-neutral text-neutral-content p-10">
      <div class="container mx-auto px-4">
        <div class="footer sm:footer-horizontal">
          <aside>
            <svg
              width="50"
              height="50"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
              fill-rule="evenodd"
              clip-rule="evenodd"
              class="fill-current"
            >
              <path
                d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"
              ></path>
            </svg>
            <p>
              学词乐
              <br />
              致力于为学生提供最优质的英语词汇学习解决方案
            </p>
          </aside>
          <nav>
            <h6 class="footer-title">快速链接</h6>
            <a href="#features" class="link link-hover">功能特色</a>
            <a href="#vocabulary" class="link link-hover">词库资源</a>
            <a @click="goStudy" class="link link-hover cursor-pointer"
              >立即开始</a
            >
          </nav>
          <nav>
            <h6 class="footer-title">联系方式</h6>
            <p class="flex items-center opacity-80 mb-3">
              <Bars3Icon class="h-5 w-5 mr-2" />
              邮箱：wentai989@126.com
            </p>
            <p class="flex items-center opacity-80">
              <EnvelopeIcon class="h-5 w-5 mr-2" />
              微信：wentai989
            </p>
            <p class="opacity-70 mt-2 cursor-pointer" @click="openBeian">
              冀ICP备2025113200号-1
            </p>
          </nav>
          <nav>
            <h6 class="footer-title">社交媒体</h6>
            <div class="grid grid-flow-col gap-4">
              <a @click="gitee" class="cursor-pointer">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  class="fill-current"
                >
                  <path
                    d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
                  ></path>
                </svg>
              </a>
            </div>
            <p class="opacity-70 mt-4">&copy; 2025 芮晨网络 保留所有权</p>
          </nav>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
definePageMeta({
  layout: "no-sidebar",
});

const goStudy = () => {
  navigateTo("/course");
};
const gitee = () => {
  window.open("https://gitee.com/wentai111/xuecile", "_blank");
};
const openBeian = () => {
  window.open("https://beian.miit.gov.cn/", "_blank");
};

import { Bars3Icon, EnvelopeIcon } from "@heroicons/vue/24/solid";
</script>
